<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>权限</title>
</head>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js" type="text/javascript"></script>
    <script src="js/axios-0.18.0.js" type="text/javascript"></script>
    <script src="element-ui/lib/index.js"></script>

<body>
    <div id="div">
        <el-container>
                <el-container>
                    <el-header style="text-align: right; font-size: 12px">
                        <el-dropdown>
                            <i class="el-icon-setting" style="margin-right: 15px"></i>
                            <el-dropdown-menu slot="dropdown">

                            </el-dropdown-menu>
                        </el-dropdown>
                    </el-header>

                    <el-main>
                        <b style="color: black; font-size: 20px;">角色管理</b>
                        <b style="color: black; font-size: 20px;">账号权限管理</b>
                        <div style="float:right">
                            <el-button type="primary">新增角色</el-button>
                        </div>
                        <el-table :data="tableData">
                            <el-table-column prop="roleId" label="编号" width="260">
                            </el-table-column>
                            <el-table-column prop="name" label="角色名称" width="260">
                            </el-table-column>
                            <el-table-column prop="desc" label="角色描述" width="260">
                            </el-table-column>
                            <el-table-column prop="state" label="角色状态" width="260">
                            </el-table-column>
                            <el-table-column
                                    label="操作"
                                    width="260">
                                <el-button type="warning">修改</el-button>
                                <el-button type="danger">删除</el-button>
                                <el-button type="warning">停用</el-button>
                            </el-table-column>
                        </el-table>
                    </el-main>
                </el-container>
            </el-container>
        </el-container>
    </div>
</body>
    <script>
        new Vue({
            el:"#div",
            data:{
                tableData:[
                    {
                        roleId:"1",
                        name:"管理员",
                        desc:"管理员",
                        state:"启用"
                    }
                ]
            }


        });
    </script>
</html>